<script setup lang="ts">
// import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
    <header>
        <div class="wrapper">
            <nav>
                <p><RouterLink to="/">Home</RouterLink></p>
                <RouterLink to="/todolist">TodoList</RouterLink>
                <RouterLink to="/MyProfile">MyProfile</RouterLink>
            </nav>
        </div>
    </header>
  <RouterView />
</template>

<style scoped>
.wrapper{
    position: absolute;
    top: 10px
}
nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: black;
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  padding: 0 1rem;
  color: hsla(160, 100%, 37%, 1);
  text-decoration: none;
}

</style>
